<template>
   <div>
       <div class="main">
           <div class="top">
               <img v-if="commentData.user.head_img" class="avatar_img" :src="$baseURL+commentData.user.head_img" alt="">
      <img v-else class="avatar_img" src="@/images/75d28f97ly1fvuzkfr3h5j22c02c07wk.jpg" alt="">
      <div class="info">
          <div class="nickname">{{commentData.user.nickname}}</div>
          <div class="create_date">{{commentData.create_date.slice(0,10)}}</div>
      </div>
      <span class="reply" @click="replyHandle">回复</span>
           </div>
       </div>
       <CommentParent v-if="commentData.parent" :parentData='commentData.parent'/>
       <p class="content">主评论：{{commentData.content}}</p>
   </div>
</template>

<script>
import CommentParent from '@/components/myframe/Parent.vue'
import Bus from '@/untails/bus'
export default {
    components:{
        CommentParent
    },
    props:['commentData'],
    methods:{
      replyHandle(){
        // 点击回复的时候，触发事件总线中注册的 sendComment 事件
        Bus.$emit('sendComment',this.commentData.id)
      }
    }
}
</script>

<style lang="less" scoped>
.main {
    border-bottom: 1px solid #ccc;
    padding: 10px;
  .top {
      display: flex;
    .avatar_img {
          width: 25px;
          height: 25px;
          object-fit: cover;
          margin-right: 5px;
          border: 1px solid #ccc;
          border-radius: 50%;
    }

    .info {
        flex: 1;

      .nickname {
          font-size: 14px;
      }

      .create_date {
           margin-top: 3px;
           font-size: 12px;
           color: #ccc;
      }
    }

    .reply {
         color: #999;
         font-size: 13px;
    }
  }
}


  .content {
  margin-top: 5px;
  line-height: 1.4;
  }

</style>